﻿///<reference path="../../../scripts/jquery-1.4.4.min.js" />
///<reference path="../../../scripts/progressbar/jquery.progressbar.js" />
///<reference path="../../../scripts/swfupload/swfupload.js" />
///<reference path="../../../scripts/swfupload/jquery.swfupload.js" />
///<reference path="../../../scripts/jquery.prettyPhoto.js" />


function setDefaultImage(){
    var haveDefaultImage = $("#thumbnails-container li[class='default']");
    if(!haveDefaultImage || haveDefaultImage.length==0){
        //set first one to defualt
         var target = $("#thumbnails-container li:first");
         target.addClass("default");
         target.find("input:last").val("True");
    }
}


$(function () {
    jQuery.fn.bindAll = function (options) {
        var $this = this;
        jQuery.each(options, function (key, val) {
            $this.bind(key, val);
        });
        return this;


    }
    $(function () {
        $('#image-upload-control').swfupload({
            upload_url: upload_action,
            file_size_limit: "2 MB",
            file_types: "*.jpg; *.jpeg; *.png; *.gif; *.GIF; *.PNG;",
            file_types_description: "Images",
            file_upload_limit: "0",
            button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,

            flash_url: flash_url,
            button_image_url: button_image_url,
            button_width: 160,
            button_height: 22,
            button_placeholder: $('.filebutton', this)[0],
            button_text: '<span class="button">' + label + ' <span class="buttonSmall">(2 MB Max)</span></span>',
            button_text_style: ".button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }",
            button_text_top_padding: 1,
            button_text_left_padding: 5,
            post_params: { "Name": $("#Name").val() },
            debug: false,
        });
    });

    $(function () {

        var listeners = {
            swfuploadLoaded: function (event) {
            },
            fileQueued: function (event, file) {
            },
            fileQueueError: function (event, file, errorCode, message) {
            },
            fileDialogStart: function (event) {
            },
            fileDialogComplete: function (event, numFilesSelected, numFilesQueued) {
                $(this).swfupload('setPostParams', { "Name": $("#Name").val() });
                $(this).swfupload('startUpload');
            },
            uploadStart: function (event, file) {
                $("#image-upload-control .progressbar").show();
                $("#image-upload-control .progressbar").reportprogress(0);
            },
            uploadProgress: function (event, file, bytesLoaded) {
                $("#image-upload-control .progressbar").reportprogress(bytesLoaded, file.size);
            },
            uploadSuccess: function (event, file, serverData) {
                //serverData format : {ThumbnailName:'ThumbnailName', DetailName:'detail file name'}
                var data = eval('(' + serverData + ')');

                $('.log', this).empty();
                ProductImageIndex++;

                var paras = serverData.split("/");
                var fileName = paras[paras.length - 1];

                var li = $('<li>'
                              + '  <input name="ProductImages.index" type="hidden" value="' + ProductImageIndex + '" >'
                              + '  <input name="ProductImages[' + ProductImageIndex + '].Id" type="hidden" value="-1" >'
                              + '  <input name="ProductImages[' + ProductImageIndex + '].Name" type="hidden" value="' + fileName + '" >'
                              + '  <input name="ProductImages[' + ProductImageIndex + '].CoverImage" type="hidden" value="False" >'
                              + '  <a href="' + data.DetailName + '" rel="prettyPhoto[gallery]">'
                              + '  <img src="' + data.ThumbnailName + '" >'
                              + '  </a>'
                              + '  <p>'
                              + '     <a class="o-icon tick product-image-set-as-default" href="#" title="Set as default image" >Set default</a> <span>|</span>'
                              + '     <a class="o-icon cross product-image-delete" href="#" title="Delete this image" >Delete</a>'
                              + '  </p>'
	                          + '  <span title="Default image"></span>'
                              + '</li>');

                $('#thumbnails-container').append(li);
                li.find("img").fadeTo('slow', 1.0);
                //gallery Initial
                $("a[rel^='prettyPhoto']").prettyPhoto();

                setDefaultImage();
            },
            uploadComplete: function (event, file) {
                $("#image-upload-control .progressbar").hide();
                $(this).swfupload('startUpload');
            },
            uploadError: function (event, file, errorCode, message) {
                $('.log', this).text('upload error - ' + message);
            }
        };

        $('#image-upload-control').bindAll(listeners);
    });

    $(".product-image-set-as-default").live("click", function (e) {
        e.preventDefault();

        var old = $("#thumbnails-container").find(".default");
        old.removeClass("default");
        old.find("input:last").val("False");

        var target = $(this).parents("li:first");
        target.addClass("default");
        target.find("input:last").val("True");

        return false;
    });

    $(".product-image-delete").live("click", function (e) {
        e.preventDefault();
        $(this).parents("li").remove();

        setDefaultImage();

        return false;
    });

    //Gallery
    $("a[rel^='prettyPhoto']").prettyPhoto();
});


